import React from 'react';
import * as am4core from '@amcharts/amcharts4/core'
import * as am4charts from '@amcharts/amcharts4/charts'
import * as am4plugins_overlapBuster from "@amcharts/amcharts4/plugins/overlapBuster";

import './index.css'
// import am4themes_animated from '@amcharts/amcharts4/themes/animated'
import Logo from '../../logo.svg'

export default class LineAmcharts extends React.Component {

  componentDidMount() {


    /**
  * ---------------------------------------
  * This demo was created using amCharts 4.
  *
  * For more information visit:
  * https://www.amcharts.com/
  *
  * Documentation is available at:
  * https://www.amcharts.com/docs/v4/
  * ---------------------------------------
  */

    /* Create chart instance */
    var chart = am4core.create("tooltip01", am4charts.XYChart);

    /* Add data */
    chart.data = [{
      "year": "1994",
      "cars": 1587,
      "motorcycles": 650,
      "bicycles": 121
    }, {
      "year": "1995",
      "cars": 1567,
      "motorcycles": 683,
      "bicycles": 146
    }, {
      "year": "1996",
      "cars": 1617,
      "motorcycles": 691,
      "bicycles": 138
    }, {
      "year": "1997",
      "cars": 1630,
      "motorcycles": 642,
      "bicycles": 127
    }, {
      "year": "1998",
      "cars": 1660,
      "motorcycles": 699,
      "bicycles": 105
    }, {
      "year": "1999",
      "cars": 1683,
      "motorcycles": 721,
      "bicycles": 109
    }, {
      "year": "2000",
      "cars": 1691,
      "motorcycles": 737,
      "bicycles": 112
    }, {
      "year": "2001",
      "cars": 1298,
      "motorcycles": 680,
      "bicycles": 101
    }, {
      "year": "2002",
      "cars": 1275,
      "motorcycles": 664,
      "bicycles": 97
    }, {
      "year": "2003",
      "cars": 1246,
      "motorcycles": 648,
      "bicycles": 93
    }, {
      "year": "2004",
      "cars": 1218,
      "motorcycles": 637,
      "bicycles": 101
    }, {
      "year": "2005",
      "cars": 1213,
      "motorcycles": 633,
      "bicycles": 87
    }, {
      "year": "2006",
      "cars": 1199,
      "motorcycles": 621,
      "bicycles": 79
    }, {
      "year": "2007",
      "cars": 1110,
      "motorcycles": 210,
      "bicycles": 81
    }, {
      "year": "2008",
      "cars": 1165,
      "motorcycles": 232,
      "bicycles": 75
    }, {
      "year": "2009",
      "cars": 1145,
      "motorcycles": 219,
      "bicycles": 88
    }, {
      "year": "2010",
      "cars": 1163,
      "motorcycles": 201,
      "bicycles": 82
    }, {
      "year": "2011",
      "cars": 1180,
      "motorcycles": 285,
      "bicycles": 87
    }, {
      "year": "2012",
      "cars": 1159,
      "motorcycles": 277,
      "bicycles": 71
    }];

    /* Create axes */
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.dataFields.date = "year";
    dateAxis.renderer.labels.template.disabled = true;
    /* Create value axis */
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    var series3 = chart.series.push(new am4charts.ColumnSeries());
    series3.dataFields.valueY = "bicycles";
    series3.dataFields.dateX = "year";
    series3.name = "Bicycles";
    series3.strokeWidth = 3;
    // series3.tensionX = 0.7;
    series3.bullets.push(new am4charts.CircleBullet());

    for (var item of chart.data) {
      var range = dateAxis.axisRanges.create();
      range.date = new Date(item.year, 0, 1);
      range.label.text = item.year;
      // range.grid.disabled = true;
      // range.label.inside = true;
      // range.label.valign = "bottom";
      // range.label.align = 'center'
      range.label.location = 0.5
      range.label.dy = 0;
      range.label.dx = 40

      // range.label.tooltip = new am4core.Tooltip();
      // range.label.tooltipText = "Range:\n[bold]{date}[] to [bold][/]";
      // range.label.interactionsEnabled = true;
      // range.label.isMeasured = true;

      var label = range.label;

      console.log(label.tooltip);   //label.tooltip.background.stroke = am4core.color("#000");
      //label.tooltip.background.strokeOpacity = 1;
      //label.tooltip.fill = am4core.color("#000");
      //label.tooltip.background.fill = am4core.color("#fff");

      // 创建一个刻度线
      let tick = dateAxis.axisRanges.create();
      tick.date = new Date(item.year, 0, 1);
      tick.bullet = new am4core.Rectangle()
      tick.bullet.width = 0.5
      tick.bullet.height = 5
      tick.bullet.fill = am4core.color("#000")
      // tick.label.inside = true;
      // tick.label.valign = "bottom";
      tick.label.location = 0.5
      tick.label.dy = 40;
    }
    /* Add a single HTML-based tooltip to first series */
    // series3.tooltipHTML = ``;
    // series3.tooltip.pointerOrientation = "vertical";
    // series3.tooltip.disabled = true;
    // series3.adapter.add('tooltipHTML', (a, b, c) => {
    //   console.log(a, b, c)
    //   return `<strong>YEAR {categoryX}</strong>
    //   <hr />
    //   <table>
    //   <tr>
    //     <th align="left">Cars</th>
    //     <td id="red">{cars}</td>
    //   </tr>
    //   <tr>
    //     <th align="left">Motorcycles</th>
    //     <td>{motorcycles}</td>
    //   </tr>
    //   <tr>
    //     <th align="left">Bicycles</th>
    //     <td>{bicycles}</td>
    //   </tr>
    //   </table>
    //   <hr />`
    // })


    /* Add legend */
    // chart.legend = new am4charts.Legend();

    /* Create a cursor */
    chart.cursor = new am4charts.XYCursor();
  }
  componentWillUnmount() {
    this.chart.dispose()
  }
  render() {
    return (
      <div id='tooltip01'></div>
    )
  }
}